import footer0 from "../../../../imgs/footer-0.png";
import footer1 from "../../../../imgs/footer-1.png";
import footer2 from "../../../../imgs/footer-2.png";
import footer3 from "../../../../imgs/footer-3.png";
import erweima from "../../../../imgs/erweima.png";
import qqWhite from "../../../../imgs/qq-white.png";
import gongan from "../../../../imgs/gongan.png";
import yaopin from "../../../../imgs/yaopin.png";
import sf from "../../../../imgs/sf.png";
import urlHook from "../utils/urlHook.js";
import ZenUI from "@root/components/ZenUI/ZenUI";
import message from "@ui/RJMart/message";
import Uts from "@module/Uts";

export default function Footer() {
    const imgs = [footer0, footer3, footer2, footer1];
    // const [certUrl,updateUrl]=React.useState('')
    const topText = [
        {
            title: "鉴别真假",
            desc: "严格审核 保证质量"
        },
        {
            title: "追溯采购",
            desc: "采购符合审计要求"
        },
        {
            title: "比较价格",
            desc: "公平竞价 信息对称"
        },
        {
            title: "审批监管",
            desc: "定制体系 提高效率"
        }
    ];

    const footerText = [
        [
            "快速通道",
            "网站首页",
            "在线竞价",
            "团购促销",
            "采购人中心"
            // "科研管理中心"
        ],
        ["我是买家", "入驻申请", "渠道合作", "帮助中心"],
        ["我是卖家", "在线注册", "广告营销", "帮助中心"],
        ["关于我们", "锐竞介绍", "企业文化", "团队荣誉", "客户案例", "加入我们"]
    ];

    // React.useEffect(() => {
    //     getCertification()
    // }, []);

    function getCertification() {
        let url = `/store/api/product/category/certification`;
        let params = {};
        REST.post(url, params)
            .then(res => {
                console.log(res);
                if (res.code == 200 && res.data) {
                    let certUrl = res.data.url;
                    // updateUrl(certUrl)
                    window.open(certUrl);
                }
            })
            .catch(err => {});
    }

    return (
        <div className={"footer-root-wrapper"}>
            <div
                style={{
                    width: 1200,
                    position: "relative"
                }}
            >
                <div
                    style={{
                        height: 130,
                        borderBottom: "1px solid rgba(235,235,235,1)"
                    }}
                >
                    <div className={"footer-top-box"}>
                        {imgs.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    className={`footer-top-item-${index} footer-top-item`}
                                >
                                    <img src={item} alt="" />
                                    <div>
                                        <p className={"footer-top-item-p1"}>
                                            {topText[index].title}
                                        </p>
                                        <p className={"footer-top-item-p2"}>
                                            {topText[index].desc}
                                        </p>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
                <div
                    style={{
                        height: 274,
                        borderBottom: "1px solid rgba(235,235,235,1)",
                        paddingTop: 32,
                        boxSizing: "border-box",
                        display: "flex"
                    }}
                >
                    {footerText.map((item, index) => (
                        <FooterCenterItem
                            key={index}
                            index={index}
                            item={item}
                        />
                    ))}
                    <ContactUs />
                </div>
                <div className={"footer-bottom-box"}>
                    <div>
                        <div className={"footer-bottom-box-layer1"}>
                            <p>
                                Copyright ©️ 2016-2019
                                广州锐竞信息科技有限责任公司版权所有
                            </p>
                            <a
                                target={"_blank"}
                                href={
                                    "http://gd.beian.miit.gov.cn/state/outPortal/loginPortal.action"
                                }
                                className={"footer-bottom-box-p1"}
                            >
                                粤ICP备16055118号-2
                            </a>
                            <a
                                target={"_blank"}
                                href={
                                    "http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010502000987"
                                }
                                className={"footer-bottom-gongan zen_m-r-30"}
                            >
                                <img src={gongan} alt="" />
                                <p>粤公网安备 44010502000987号</p>
                            </a>
                        </div>
                        <div className={"footer-bottom-layer2"}>
                            <a
                                target={"_blank"}
                                onClick={getCertification}
                                className={"footer-bottom-layer2-p1"}
                            >
                                增值电信业务许可证{" "}
                                <span className={"zen_m-l-10"}>
                                    粤B2-20181576
                                </span>
                            </a>
                            <a
                                target={"_blank"}
                                href={
                                    "http://www.gdzwfw.gov.cn/portal/guide/11440000MB2D03442122072095001"
                                }
                                className={"footer-bottom-layer2-p1 zen_m-l-40"}
                            >
                                备案编号：（粤）网械平台备字（2019）第00006号
                            </a>
                            <div style={{ width: 20 }} />
                        </div>
                    </div>
                </div>
                <div className={"footer-bootom-btns"}>
                    <a
                        target={"_blank"}
                        href={
                            "https://credit.cecdc.com/CX20180629080357130375.html"
                        }
                        className={"footer-bootom-btn"}
                    >
                        <img
                            src={sf}
                            style={{ width: 100, height: 30 }}
                            alt=""
                        />
                    </a>
                    <a
                        target={"_blank"}
                        href={"https://www.rjmart.cn/purchaser/certificate.pdf"}
                        className={"footer-bootom-btn"}
                    >
                        <img
                            src={yaopin}
                            alt=""
                            style={{ width: 100, height: 30 }}
                        />
                    </a>
                </div>
            </div>
        </div>
    );
}

function ContactUs() {
    const txts = [
        "联系我们",
        "客服电话：400-900-5786 ",
        "客服邮箱：service@rjmart.cn",
        "QQ客服：",
        "工作时间：周一至周五，9:00-18:00"
    ];

    return (
        <div className={`footer-center-item-us`}>
            <p className={"footer-center-item-title"}>{txts[0]}</p>
            <p className={"footer-center-item-us-p"}>{txts[1]}</p>
            <p className={"footer-center-item-us-p"}>{txts[2]}</p>
            <div
                style={{
                    display: "flex"
                }}
            >
                <p className={"footer-center-item-us-p"}>{txts[3]}</p>
                <a
                    href={
                        "tencent://message/?uin=2359872304&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes"
                    }
                    className={"footer-qq-box"}
                >
                    <img src={qqWhite} alt="" />
                    <p>锐竞小D</p>
                </a>
                <a
                    href={
                        "tencent://message/?uin=3520256275&Site=%E5%9C%A8%E7%BA%BFQQ&Menu=yes"
                    }
                    className={"footer-qq-box"}
                    style={{
                        marginLeft: 6
                    }}
                >
                    <img src={qqWhite} alt="" />
                    <p>锐竞小S</p>
                </a>
            </div>
            <p className={"footer-center-item-us-p"}>{txts[4]}</p>
            <div style={{ display: "flex" }}>
                <img src={erweima} alt="" />
                <div style={{ marginLeft: 10, marginTop: 15 }}>
                    <p className={"footer-center-item-us-p"}>关注公众号</p>
                    <p className={"footer-center-item-us-p"}>
                        支持手机审批验收
                    </p>
                </div>
            </div>
        </div>
    );
}

function navTo(props, idx) {
    const { index, item } = props;
    const urlList = urlHook.footerUrlList;
    console.log(index, idx);

    if (index == 1 && idx == 3) {
        let isSuppLogin = Uts.getCookie("id1");
        if(isSuppLogin){
            message.warn({
                text: "只允许采购账号查看，请切换账号",
                duration: 3000
            });
        }else{
            window.open("./#/HelpCenter");
        }
    } else {
        if (index == 2 && idx == 3) {
            let isSuppLogin = Uts.getCookie("id1");

            if (isSuppLogin) {
                window.open(urlList[index][idx]);
            } else {
                message.warn({
                    text: "只允许供应商账号查看， 请切换账号",
                    duration: 3000
                });
            }

            return;
        }

        if (index == 0 && idx == 1) {
            window.location.href = urlList[index][idx - 1];
        } else {
            if (idx > 0) {
                // window.location.href = urlList[index][idx - 1];
                window.open(urlList[index][idx - 1]);
            }
        }
    }
}

function getClassName(index, idx) {
    if (index == 2 && idx == 2) {
        return "footer-center-item-p2";
    } else if (idx == 0) {
        return "footer-center-item-title";
    } else {
        return "footer-center-item-p";
    }
}

function FooterCenterItem(props) {
    const { index, item } = props;
    return (
        <div className={`footer-center-item-${index}`}>
            {item &&
                item.map((txt, idx) => (
                    <p
                        onClick={() => navTo(props, idx)}
                        key={idx}
                        className={getClassName(index, idx)}
                    >
                        {txt}
                    </p>
                ))}
        </div>
    );
}
